<template>
  <div class="main">
    <div class="summOut">
      <Scroller lock-x>
        <div class="ouerImgWrap">
          <span class="posBack" @click="backToPrev">  
            <img class="posImg" src="~/static/images/top_icon_back1.png" alt />
          </span>
          <img
            class="summImg"
            src="https://static.shengxue985.com/sxzx_app/h5/activity/mnzytb.png"
            alt
          />
          <div style="height: 1.5rem;"></div>
        </div>
      </Scroller>
         <div class="create-btn">
          <span @click="gotos">开始填报</span>
        </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="show15" position="bottom">
        <div class="popupBoxWrap">
          <span class="title flex-h">
            <b class="flex1">选择版本</b>
            <img @click="show15=false" src="~/static/images/volunteer_icon_close.png" alt />
          </span>
          <span class="popupBoxs" @click="hasBalanceHistory">
            <b>老高考版</b>
            <i>适合于通过文理选科模式下的志愿填报策略</i>
          </span>
          <span class="popupBoxs popup2" @click="hasBalanceHistoryZj">
            <b>新高考版</b>
            <i>适合于7选3、6选3、以及3+1+2选科模式下的志愿填报策略</i>
          </span>
        </div>
      </popup>
    </div>
    <LoginVerification
      :isShowModal="isShowModal"
      v-on:fromChildloginVerification="loginVers"
      headTitle="志愿填报服务"
    ></LoginVerification>
  </div>
</template>
<script>
import ls from "store2";
import { getBalanceHistory, getBalanceHistoryZj } from "~/api/volunteer";
import { getTeacherUserInfoById, getUserInfoById} from "~/api/identity"
import { identityLogin } from "~/api/identity";
import { TransferDom, Popup, Scroller } from "vux";
import LoginVerification from "~/components/LoginVerification";
import { format } from "~/plugins/filter";
import { backAppOrWx } from "~/common/common";
export default {
  head: {
    title: "志愿填报"
  },
  directives: {
    TransferDom
  },
  components: {
    Popup,
    Scroller,
    LoginVerification
  },
  data() {
    return {
      isShowModal: false,
      show15: false,
      showNext: false,
      userType: "",
      listRecord: 0,
      listnoRecord: 0,
      listZjRecord: 0,
      listnoZjRecord: 0
    };
  },
  created() {},
  mounted: function() {
    this.commonJs.accectAppParame();
    if (ls.get("yxkData")) {
      this.showuserAreas();
    } else {
      this.isShowModal = true;
    }

  },
  destroyed() {
  },
  methods: {
    loginVers(data) {
      identityLogin(data)
        .then(res => {
          if (res.code === "0") {
            let usersData = res.data;
            ls.set("yxkData", usersData);
            ls.set("userType", usersData.userType);
            ls.set("tokens", usersData.accessToken);
            this.isShowModal = false;
            this.$vux.toast.text("服务授权成功");
            this.showuserAreas();
          } else {
            this.$vux.toast.text(res.message);
          }
        })
        .catch(error => {
          this.$vux.toast.text(error);
        });
    },
    //查看卡劵是否生成方案

    hasBalanceHistory() {
      this.$vux.loading.show();
      getBalanceHistory(ls.get("userType"))
        .then(res => {
          if (res.code == "0") {
            let length = res.data.length;
            if (length) {
              this.commonJs.gopush("programrecord");
            } else {
              this.commonJs.gopush("stepOne");
            }
          }
          this.$vux.loading.hide();
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    hasBalanceHistoryZj() {
      this.$vux.loading.show();
      getBalanceHistoryZj(ls.get("userType"))
        .then(res => {
          if (res.code == "0") {
            let length = res.data.length;
            console.log("length: ", length);
            if (length) {
              this.commonJs.gopush("../zhejiang/programrecord");
            } else {
              this.commonJs.gopush("../zhejiang/stepOne");
            }
          }
          this.$vux.loading.hide();
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    showuserAreas() {
        if(ls.get("userArea")){ return false}
        getUserInfoById({ uid: ls.get("yxkData").userVoId })
          .then(res => {
            let areas = res.data.area;
            let areaArr = areas.split(",");
            let userArea = areaArr[0];

            ls.set("userArea", userArea);
            this.$vux.loading.hide();
          })
          .catch(error => {
            this.$vux.toast.text(error);
          });
    
    },
    gotos() {
      this.show15 = true;
    },
    backToPrev() {
        backAppOrWx()
    }
  }
};
</script>

<style scoped lang="less">
.popupBoxWrap {
  width: 7.5rem;
  height: 6rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.2rem 0.2rem 0px 0px;
  padding: 0.4rem 0.3rem;
  box-sizing: border-box;

  .title {
    height: 0.8rem;
    line-height: 0.8rem;

    b {
      font-size: 0.36rem;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      vertical-align: middle;
    }

    img {
      vertical-align: middle;
      width: 0.4rem;
      height: 0.4rem;
      display: inline-block;
      // float: right;
    }
  }

  .popupBoxs {
    margin-top: 0.3rem;
    width: 100%;
    height: 1.4rem;
    display: block;
    border-radius: 0.1rem;
    border: 0.02rem solid rgba(229, 232, 237, 1);
    padding: 0.3rem 0;
    box-sizing: border-box;

    b,
    i {
      display: block;
      text-align: center;
    }

    b {
      font-size: 0.3rem;
      color: rgba(34, 34, 34, 1);
      margin-bottom: 0.1rem;
    }

    i {
      font-size: 0.26rem;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
  }
  .popup2 {
    height: 1.8rem;
  }
}

.ouerImgWrap {
  width: 7.5rem;
  height: auto;
  position: relative;

  .posBack {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    left: 0.2rem;
    top: 0.2rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;

    .posImg {
      display: block;
      width: 0.5rem;
      height: 0.5rem;
      margin: 0.15rem auto;
    }
  }
}

.fixadBot {
  width: 7.5rem;
  overflow: hidden;
  position: fixed;
  max-height: 2rem;
  height: 1.5rem;
  bottom: 0rem;
  z-index: 100;

  span {
    display: block;
    width: 3.2rem;
    height: 0.8rem;
    background: @mainColor;
    border-radius: 0.1rem;
    font-size: 0.36rem;

    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    line-height: 0.8rem;
    text-align: center;
    margin: 0.2rem auto 0.2rem;
  }
}

.summOut {
  width: 7.5rem;
  height: auto;
  min-height: 16.24rem;
  background: #fff;
}

.summImg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 16.93rem;
}

.adOuterWrap {
  width: 7.5rem;
  height: 100vh;
  background: #fff;
  flex-direction: column;
  overflow: hidden;

  .adWrap {
    flex: 1;
    padding: 0 0.3rem;
    width: 7.5rem;
    box-sizing: border-box;

    .adBoxs {
      width: 100%;
      height: 100%;

      background: url("~/static/images/zybj.png") no-repeat;
      background-size: 100% 100%;

      img {
        display: block;
        border: none;
        width: 100%;
        height: 100%;
      }
    }
  }

  .adBot {
    overflow: hidden;
    max-height: 2rem;

    span {
      display: block;
      width: 3.2rem;
      height: 0.8rem;
      // background: linear-gradient(45deg, rgba(103, 189, 25, 1) 0%, rgba(181, 232, 97, 1) 100%);
      background: @mainColor;
      border-radius: 0.1rem;
      font-size: 0.36rem;

      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      line-height: 0.8rem;
      text-align: center;
      margin: 0.2rem auto 0.3rem;
    }
  }
}

.back {
  width: 100%;
  height: auto;

  .header_back {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    padding: 0.2rem 0.3rem;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .imgIcon {
      width: 0.4rem;
      height: 0.4rem;
    }

    .back {
      display: inline-block;
      margin-left: 0.1rem;
      font-weight: bold;
      color: #222;
      // width: 0.4rem;
      // height: 0.4rem;
      // font-size: 0.3rem;
    }
  }

  h2 {
    padding: 0 0.3rem;
    box-sizing: border-box;
    display: block;
    height: 0.8rem;
    font-size: 0.44rem;

    font-weight: bold;
    color: rgba(34, 34, 34, 1);
    line-height: 0.8rem;
  }
}
.create-btn {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  height: auto;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px -0.04rem 0.1rem 0px rgba(204, 204, 204, 0.2);
  span {
    display: block;
    margin: 0.2rem auto;
    width: 6rem;
    height: 0.88rem;
    background: rgba(128, 213, 102, 1);
    border-radius: 0.44rem;
    text-align: center;
    line-height: 0.88rem;
    font-size: 0.3rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
